﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

.datepicker {
    $item-height: rem(32);
    text-align: center;
    width: rem(350);
    border: $color-border solid 1px;
    .datepicker-weeks, .datepicker-days {
        width: 100%;
        display: flex;
        flex-flow: wrap;
        > li {
            width: 100 / 7 *1%;
            height: $item-height;
            line-height: $item-height;
            display: inline-block;
            border-bottom: $color-border solid 1px;
        }
    }
    .datepicker-weeks {
        background-color: #f0f0f0;
    }
    .datepicker-days {
        > li {
            cursor: pointer;
            color: $primary;
            &:hover {
                background-color: #f0f0f0;
                color: #fff;
            }
            &.invalid {
                color: $gray;
            }
        }
    }

    .datepicker-buttons {
        position: relative;
        .prev, .next {
            position: absolute;
            cursor: pointer;
        }
        .prev{
            left:0;
        }
        .next{
            right: 0;
        }
    }

}